<template>
	<view>
		<view class="itemList empty dis dis3" @click="changeHead">
			<view class="itemLeft contenr">头像</view>
			<view class="itemRig contenr">
				<view class="avatarUrl">
					<image :src="imageUrl" mode="scaleToFill" class="avatarUrlImg"></image>
				</view>
				<image src="../../../static/image/ico_5.png" mode="aspectFit" class="left"></image>
			</view>
		</view>
		<view class="itemList bor dis dis3" @click="goUrl">
			<view class="itemLeft contenr">昵称</view>
			<view class="itemRig contenr">
				<view class="widthRig dis dis2 dis7">
					<text class="nameText">{{name}}</text>
				</view>
				<image src="../../../static/image/ico_5.png" mode="aspectFit" class="left"></image>
			</view>
		</view>
		<!--  <picker @change="bindPickerChange" :value="index" :range="array"> -->
		<picker @change="bindPickerChange" :value="text" :range="goodList" range-key="text">
			<view class="itemList bor dis dis3">
				<view class="itemLeft contenr">性别</view>
				<view class="itemRig contenr">
					<view class="widthRig dis dis2 dis7">
						<text class="nameText">{{sex==1?'男':sex==2?'女':sex==0?'未知':sex}}</text>
					</view>
					<image src="../../../static/image/ico_5.png" mode="aspectFit" class="left"></image>
				</view>
			</view>
		</picker>
		<!-- <picker @change="getAge" :value="age" :range="ageList" range-key="age"> -->
		<picker @change="getAge" :value="startDate" mode="date" :end="endDate">
			<view class="itemList bor dis dis3">
				<view class="itemLeft contenr">出生日期</view>
				<view class="itemRig contenr">
					<view class="widthRig dis dis2 dis7">
						<text class="nameText">{{age}}</text>
					</view>
					<image src="../../../static/image/ico_5.png" mode="aspectFit" class="left"></image>
				</view>
			</view>
		</picker>
		<picker mode="region" @change="bindRegionChange1" :value="region" :custom-item="customItem">
			<view class="itemList bor dis dis3">
				<view class="itemLeft contenr">常居地</view>
				<view class="itemRig contenr">
					<view class="widthRig dis dis2 dis7">
						<text class="nameText">{{ctiy}}</text>
					</view>
					<image src="../../../static/image/ico_5.png" mode="aspectFit" class="left"></image>
				</view>
			</view>
		</picker>
		<view class="itemList itemList_1 dis dis3" v-if="isPhon">
			<view class="itemLeft contenr">手机号</view>
			<view class="itemRig contenr">
				<view class="widthRig dis dis2 dis7">
					<text class="nameText">已绑定</text>
				</view>
				<image src="../../../static/image/ico_5.png" mode="aspectFit" class="left"></image>
			</view>
		</view>
		<!-- button open-type="getPhoneNumber" @getphonenumber="getPhoneNumber" -->
		<button plain='true' class="itemList itemList_1 dis dis3 button" v-if="!isPhon" style="border: none;" open-type="getPhoneNumber"
		 @getphonenumber="getPhoneNumber">
			<view class="itemLeft contenr">手机号</view>
			<view class="itemRig contenr">
				<view class="widthRig dis dis2 dis7">
					<text class="nameText" v-if="!isPhon">未绑定</text>
				</view>
				<image src="../../../static/image/ico_5.png" mode="aspectFit" class="left"></image>
			</view>
		</button>

		<!-- 遮罩层 -->
		<view class="shade" v-show="shoot">
			<view class="stratum">
				<view class="stratum_top stratum_top1 contenr" @click="shootHead">拍照</view>
				<view class="stratum_top contenr" @click="phoneSelect">从手机相册选择</view>
				<view class="stratum_top stratum_top2 contenr" @click="cancel">取消</view>
			</view>
		</view>
	</view>
</template>

<script>
	let app = getApp().globalData;
	import util from '@/common/js/util.js';
	import config from '@/common/js/config.js'
	export default {
		data() {
			return {
				imageUrl: app.user.avatarurl,
				name: app.user.nickname,
				shoot: false, //是否出现遮罩层更换头像
				goodList: [{
						text: '男',
						id: 1
					},
					{
						text: '女',
						id: 2
					}
				],
				sex: app.user.sex,
				sexin: app.user.sex, //男女的性别标识
				ageList: [],
				age: app.user.birth ? app.user.birth : '请选择你的出生年月', //年龄
				isPhon: app.user.phone, //是否绑定手机
				region: ['广东省', '深圳市', '海珠区'],
				ctiy: app.user.city ||'请选择常居地址',
				endDate:',',
				startDate:'1995-06-15',
			}
		},
		onLoad() {
			console.log(app)
			let date = new Date();
			let endDate = util.fmdata(date);
			this.endDate= `${endDate.Y}-${endDate.M}-${endDate.D}`;
		},
		onShow() {},
		methods: {
			// 弹窗
			changeHead() {
				this.shoot = true;
			},
			// 拍照
			shootHead() {
				let that = this;
				// this.chooseImage();
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						that.uploadFile(res.tempFilePaths)
					}
				});
				this.shoot = false
			},
			// 从手机相册选择
			phoneSelect() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths));
						that.uploadFile(res.tempFilePaths)
					}
				});
				this.shoot = false
			},
			uploadFile(tempFilePaths) {
				let that =this;
				let url = `${config.BaseUrl}user/uploadheadpic.do`;
				uni.uploadFile({
					url: `${config.BaseUrl}user/uploadheadpic.do`, 
					filePath: tempFilePaths[0],
					header: {
						"content-type": 'application/x-www-form-urlencoded'
					},
					name: 'file',
					formData: {
						userid: uni.getStorageSync('uid'),
						token: uni.getStorageSync('token')
					},
					success: (res) => {
						let data =JSON.parse(res.data) 
						console.log(`请求地址:${url}`);
						console.log(`请求参数:userid: ${uni.getStorageSync('uid')},token: ${uni.getStorageSync('token')}`)
						console.log(data);
						that.imageUrl = data.data;
						app.user.avatarurl = data.data
					}
				})
			},
			// 取消
			cancel() {
				this.shoot = false
			},
			// 跳转
			goUrl() {
				let name = this.name
				uni.navigateTo({
					url: `../amendName/amendName`
				});
			},
			// 选择性别
			bindPickerChange(e) {
				// console.log(e)
				let index = e.detail.value;
				let list = this.goodList;
				let that = this;
				this.sex = list[index].text;
				if (list[index].text == '男') {
					that.sexin = 1
				} else if (list[index].text == '女') {
					that.sexin = 2
				} else {
					return
				}
				console.log(this.sexin)
				this.setUser(null, null, null, this.sexin, null)
			},
			// 获取年龄
			getAge(e) {
				// let index = e.detail.value;
				// let list = this.ageList;
				this.age = e.detail.value;
				console.log(this.age)
				this.setUser(this.age, null, null, null, null)
			},
			// 获取用户手机号,要先调用wx.login
			getPhoneNumber(e) {
				let that =this;
				uni.login({
					success: res => {
						if (res.code) {
							let code = res.code;
							that.$http._post('user/setmobile.do',{
								code:code,
								encryptedData:e.detail.encryptedData,
								iv:e.detail.iv
							}).then(res=>{
								if(res.data.issuccess==1){
									that.isPhon=true;
									app.user.phone=true
								}else{
									that.$http.isMssage(`${res.data.msg}请重试`)
								}
								console.log(res)
							})
							// console.log(code);
							// console.log(e.detail.errMsg);
							// console.log(e.detail.iv);
							// console.log(e.detail.encryptedData);
						}
						// console.log(res);
						// console.log(e)
					}
				})

				// this.isUpdate = true
			},
			// 选择省市
			bindRegionChange1(e) {
				console.log(e)
				this.ctiy = e.detail.value[1]
				let province = e.detail.value[0]
				this.setUser(null, this.ctiy, null, null, null, province)
			},
			setUser(borthday, origin, imgUrl, sex, province) {
				this.$http._post('user/setuserinfo.do', {
					username: app.user.nickname,
					avatarurl: imgUrl || app.user.avatarurl,
					sex: sex || app.user.sex,
					birth: borthday || app.user.birth,
					phone: '',
					city: origin || app.user.city,
					province: province || app.user.province
				}).then(res => {
					console.log(res)
					if (res.data.issuccess == 1) {
						app.user = res.data.data
					}
				})
			}
		},

	}
</script>


<style lang="scss">
	@import "../../../common/css/flex.css";
	@import "../../../common/css/index.scss";

	page {
		background-color: #fff;
		position: relative;
		height: 100%;
	}

	.itemList {
		width: 90%;
		margin: auto;
		height: 140upx;

		.itemLeft {
			height: 100%;
			// width: 15%;
			font-size: 32upx;
			font-family: $typeface1;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			// margin-left: 20upx;
		}

		.itemRig {
			height: 100%;

			.avatarUrl {
				width: 72upx;
				height: 72upx;
				border-radius: 50%;
				margin-right: 11upx;
				.avatarUrlImg{
					width: 72upx;
					height: 72upx;
					border-radius: 50%;
				}
			}

			.left {
				width: 44upx;
				height: 44upx;
			}

			.widthRig {
				// width: 112upx;
				height: 100%;
				margin-right: 11upx;
			}

			.nameText {
				font-family: $typeface1;
				font-size: 32upx;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);

			}
		}
	}

	.empty {
		border-bottom: 0.5px solid #f2f2f2;
	}

	.bor {
		border-bottom: 0.5px  solid #f2f2f2;
	}

	.shade {
		height: 100%;
		width: 100%;
		background: rgba(0, 0, 0, 0.65);
		// opacity: 0.65;
		z-index: 3;
		position: absolute;
		top: 0;

		.stratum {
			width: 100%;
			height: 352rpx;
			background: rgba(242, 242, 242, 1);
			position: absolute;
			bottom: 0;
			border-radius: 24upx 24upx 0 0;

			.stratum_top {
				width: 100%;
				height: 112upx;
				background: rgba(255, 255, 255, 1);
				font-size: 34upx;
				font-family: $typeface1;
				font-weight: 400;
				color: #000000;
			}

			.stratum_top1 {
				border-radius: 24upx 24upx 0px 0px;
				border-bottom: 1px solid #f2f2f2;
			}

			.stratum_top2 {
				margin-top: 16upx;
			}
		}
	}

	.button {
		background-color: #fff;
		margin: 0 auto;
		padding: 0;
	}
</style>
